{extend name="base/common"}

{block name="style"}
<link rel="stylesheet" href="/static/datepicker/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/static/iCheck/custom.css">
<link rel="stylesheet" href="/admin/css/chosen/chosen.css">
<style>
    .imggroup{
        position: relative;
    }
    .imgbox{
        height: 100px;
        width: 200px;
        margin-top: 5px;
        margin-bottom: 0;
    }
    .imgfile{
        height: 100px;
        width: 200px;
        position: absolute;
        top:0;
        opacity: 0;
    }
    .plus{
        height: 100px;
        width: 200px;
        font-size: 100px;
        line-height: 100px;
        text-align: center;
        color: rgba(204, 204, 204, 0.51);
    }
    .plus:hover{
        font-size: 150px;
    }
    .plus2{
        display: none;
    }
    .plusimg{
        display: none;
    }
    .modal-body{
        height: auto;
    }
    .pre.right{
        position: absolute;
        top:40px;
        left:425px;
    }
    .pre.right input{
        width: 150px;
    }
    .pre img,.pre label{
        display: block;
    }
    .pre label{
        margin-top: 30px;
        line-height: 30px;
    }
    .preview-content{
        width: 375px;
        height: 667px;
        overflow-y: scroll;
        box-shadow: 1px 3px 8px rgba(153, 153, 153, 0.6);
    }

    .cancel_choose{
        width:6vw;
        height:2vw;
        background:#bf2e23;

        color:#ffffff;
        border:0;
        margin-right:2vw;
        font-size: 16px;
        border-radius: 4px;
    }
    .confirm_choose{
        width:6vw;
        height:2vw;
        background:#0BB20C;
        color:#ffffff;
        border:0;
        border-radius: 4px;
        font-size: 16px;
    }
    #fileTest{
        display: none;
    }
    .up{
        width:6vw;
        height:2vw;
        background:#0a6aa1;
        color:#ffffff;
        line-height: 2vw;
        text-align: center;
        font-size: 16px;
        border-radius: 4px;
    }
    .picture_div{
        width:10vw;
    }
</style>
{/block}

{block name="page-header"}
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>
            {switch name="type" }
            {case value="1"}美丽村庄{/case}
            {case value="2"}三改一拆{/case}
            {case value="3"}平安维稳{/case}
            {/switch}
        </h2>
        <ol class="breadcrumb">
            <li>
                {switch name="type" }
                {case value="1"}<a href="{:Url('Country/index')}">{/case}
                {case value="2"}<a href="{:Url('Alter/index')}">{/case}
                    {case value="3"}<a href="{:Url('Safeguard/index')}">{/case}
                        {/switch}
                        {switch name="type" }
                        {case value="1"}美丽村庄{/case}
                        {case value="2"}三改一拆{/case}
                        {case value="3"}平安维稳{/case}
                        {/switch}
                    </a>
            </li>
            <li class="active">
                <strong>{empty name="msg"} 新增 {else/} 编辑{/empty}</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>
                    <div class="ibox-tools">
                        <a href="javascript:window.history.go(-1);" class="btn btn-white btn-sm"><i class="fa fa-reply"></i> 返回</a>
                    </div>
                </div>

                <div class="ibox-content all">
                    <form id="form" class="form-horizontal" method="post">
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>封面图片:</label>
                            </div>
                            {eq name="msg" value=""}
                            <div class="col-lg-5">
                                <div class="imggroup">
                                    <img src="" alt='图片' class='thumbnail imgbox'>
                                    <!--<input type="file" class="imgfile" accept="image/jpg, image/png, image/gif, image/jpeg">-->
                                    <input type="hidden" name="front_cover" class="img"  value="" required="">
                                </div>
                                <b>推荐尺寸：750*400px</b>
                            </div>
                            {else/}
                            <div class="col-lg-5">
                                <div class="imggroup">
                                    <img src="{$msg.front_cover|get_covers='path'}" alt='图片' class='thumbnail imgbox'>
                                    <!--<input type="file" class="imgfile" accept="image/jpg, image/png, image/gif, image/jpeg">-->
                                    <input type="hidden" name="front_cover" class="img"  value="{$msg.front_cover}" required="">
                                </div>
                                <b>推荐尺寸：750*400px</b>
                            </div>
                            {/eq}
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>标题:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入标题" class="form-control form_title" name="title" value="{$msg.title || default=''}">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-1 control-label">
                                <label>内容:</label>
                            </div>
                            <div class="col-lg-11">
                                <div class=" float-e-margins">
                                    <div class="ibox-content no-padding borders">
                                        <script id="container" name="content" type="text/plain">{$msg.content || default=''}</script>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>发布人:</label>
                            </div>
                            <div class="col-lg-11">
                                <input type="text" placeholder="请输入发布人" class="form-control form_title" name="publisher" value="{$msg.publisher || default=''}" >
                            </div>
                        </div>
                        {eq name="msg" value=""}
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>是否推荐:</label>
                            </div>
                            <div class="col-lg-11">
                                <label class="i-checks">
                                    <input type="radio" value="1" name="recommend">是
                                </label>
                                <label class="i-checks">
                                    <input type="radio" checked="" value="0" name="recommend">否
                                </label>
                            </div>
                        </div>
                        {else/}
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>是否推荐:</label>
                            </div>
                            <div class="col-lg-11">
                                <label class="i-checks">
                                    <input type="radio" value="1" name="recommend" {eq name="msg.recommend" value="1"}checked{/eq}>是
                                </label>
                                <label class="i-checks">
                                    <input type="radio" value="0" name="recommend" {eq name="msg.recommend" value="0"}checked{/eq}>否
                                </label>
                            </div>
                        </div>
                        {/eq}

                        {eq name="msg" value=""}
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>是否推送:</label>
                            </div>
                            <div class="col-lg-11">
                                <label class="i-checks">
                                    <input type="radio" value="1" name="push">是
                                </label>
                                <label class="i-checks">
                                    <input type="radio" checked="" value="0" name="push">否
                                </label>
                            </div>
                        </div>
                        {else/}
                        <div class="form-group">
                            <div class="col-lg-1 text-right control-label">
                                <label>是否推送:</label>
                            </div>
                            <div class="col-lg-11">
                                <label class="i-checks">
                                    <input type="radio" value="1" name="push" {eq name="msg.push" value="1"}checked{/eq}>是
                                </label>
                                <label class="i-checks">
                                    <input type="radio" value="0" name="push" {eq name="msg.push" value="0"}checked{/eq}>否
                                </label>
                            </div>
                        </div>
                        {/eq}
                        <input type="hidden" name="id" value="{$msg.id || default=''}">
                        <div class="form-group">
                            <div class="col-lg-11 col-lg-offset-1 buttons">
                                <button class="btn btn-primary submit-btn post-put" data-tab='1' type="button" target-form="form-horizontal" >发布</button>
                                <a class="btn btn-default" href="javascript:window.history.go(-1);">返回</a>
                            </div>
                        </div>
                        <div class="selblo"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="script"}
<script src="/static/uploadify/jquery.uploadify.min.js"></script>
<script src="/static/iCheck/icheck.min.js"></script>
<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.all.min.js"></script>
<script src="/admin/js/chosen.jquery.js"></script>
<script>
    $(function(){
        //    单选按钮
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });
        var type = "{$type}";
        if(type == 1){
            highlight_subnav("{:Url('Country/index')}");
        }else if (type == 2){
            highlight_subnav("{:Url('Alter/index')}");
        }else{
            highlight_subnav("{:Url('Safeguard/index')}");
        }
        //上传图片
        var plus = $('.plus');
        var imgnum = 1;
        plus.on('click',function(){
            var it = $(this);
            it.hide().next().fadeIn();
            imgnum = 3;
            if(!it.hasClass('plus2')){
                plus.eq(1).fadeIn();
                imgnum = 2
            }
        });
        $(".imgbox").off().on("click",function(){
            if($(".img_pop_up").length==0){
                html = '';
                html +=
                    '<div class="img_pop_up">' +
                    '<div class="self_img_pop_up">' +
                    '<div class="cut_img">' +
                    '<img id="imgTest" src="" alt="">' +
                    '</div>' +
                    '<div class="confirm_button">' +
                    '<div class="picture_div">' +
                    '<input type="file" id="fileTest">' +
                    '<div class="up">选择文件</div>' +
                    '</div>' +
                    '<button class="cancel_choose">取消</button><button class="confirm_choose">确定</button>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                $("body").append(html);
            }
            $(".up").off("click").on('click', function () {
                $('#fileTest').click();
            });
            $(".img_pop_up").show();
            $('#fileTest').on('change', function(ev) {
                var size = ($(this)[0].files[0].size / 1024).toFixed(2);
                var imgBox = $(this);
                if(size <= 2048) {
                    let $file = $(this);
                    let fileObj = $file[0];
                    let windowURL = window.URL || window.webkitURL;
                    let dataURL = null;
                    if (!fileObj || !fileObj.files || !fileObj.files[0]) return;
                    dataURL = windowURL.createObjectURL(fileObj.files[0]);
                    $("#imgTest").attr('src', dataURL);
                    $("#imgTest").cropper({
                        aspectRatio: 15 / 8,
                        viewMode: 1,
                        rotatable: true,
                        guides: false,
                        dragMode: "move",
                        background: true,
                        movable: true,
//                   cropBoxMovable :false,
                        cropBoxResizable :false,
                        resizable: false,
                        dragCrop:false
                    });
                    $("#imgTest").cropper('replace', dataURL);
                }else{
                    warning({msg:"您选择的图片超过2mb，请重新选择"});
                    return;
                }
            });

            $('.confirm_button .confirm_choose').off().on('click', function() {
                if ($("#imgTest").cropper('getCroppedCanvas') == null) return;
                var base64 = $("#imgTest").cropper('getCroppedCanvas').toDataURL('base64', 0.3);
                $.ajax({
                    type: 'post',
                    url: "{:Url('Admin/picture_play')}",
                    data: {
                        type: base64
                    },
                    success: function (res) {
                        if(res.code == 1){
                            $("input[name='front_cover']").val(res.data);
                        }else{
                            updateAlert(data.msg, 'error');
                            it.attr('disabled','true');
                            it.prev().prop('disabled','true');
                            setTimeout(function(){
                                it.removeAttr('disabled');
                                it.prev().removeAttr('disabled')
                            },2000);
                        }
                    }
                });
                $(".imgbox").attr("src",base64);
                $('.self_bg').remove();
                $("#imgTest").cropper('reset');
                $('.img_pop_up').css('display', 'none');
            });
            $('.confirm_button .cancel_choose').off().on('click', function() {
                $('.img_pop_up').css('display', 'none');
            });
        });

        var ue = UE.getEditor('container',{
            initialFrameHeight:400
        });

        //保存和发布
        $(".save,.post-put").off('click').on("click",function(){
            var it=$(this);
            var data = {
                id:$("input[name='id']").val(),
                front_cover:$("input[name='front_cover']").val(),
                title:$("input[name='title']").val(),
                content:ue.getContent(),
                publisher:$("input[name='publisher']").val(),
                recommend:$("input[name='recommend']:checked").val(),
                push:$("input[name='push']:checked").val(),
            };
            $.ajax({
                type:"post",
                url:$("#form").attr("action"),
                data:data,
                success:function(data){
                    if(data.code == 1){
                        if (data.url) {
                            updateAlert(data.msg + ' 页面即将自动跳转~','success');
                        }else{
                            updateAlert(data.msg ,'success');
                        }
                        it.prop('disabled','true');
                        it.prev().prop('disabled','true');
                        setTimeout(function(){
                            if (data.url) {
                                location.href=data.url;
                            } else {
                                location.reload();
                            }
                            it.removeAttr('disabled');
                            it.prev().removeAttr('disabled')
                        },2000);
                    } else {
                        updateAlert(data.msg, 'error');
                        it.attr('disabled','true');
                        it.prev().prop('disabled','true');
                        setTimeout(function(){
                            it.removeAttr('disabled');
                            it.prev().removeAttr('disabled')
                        },2000);
                    }
                }
            });
        });
    })

</script>
{/block}